<template>
    <el-dialog
            title="供应商准入审批"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
        <div class="form-scroll-container">
            <span style="color:#409EFF">供应商基本信息</span>
            <el-progress :percentage="15" :format="format" :show-text="false"></el-progress>
            <el-form :model="form" >
                <el-row>
                    <el-col :span="8" >
                        <el-form-item label="供应商编码">
                            <el-input v-model="supplierData.supplierCode" disabled
                                      style="font-size: 14px; font-weight: bold;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="供应商准入编码">
                            <el-input v-model="supplierData.supplierNum" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商名称">
                            <el-input v-model="supplierData.supplierName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="准入申请时间">
                            <el-date-picker v-model="supplierData.enterTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span class="bold-text" >供应商基本信息</span>
            <el-table :data="localTableData" style="width: 100%; ">
                <el-table-column prop="supplierCode" label="供应商编码"></el-table-column>
                <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
                <el-table-column prop="supplierType" label="供应商分类">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.supplierType === '零件供应商'" type="warning">{{ scope.row.supplierType }}</el-button>
                        <el-button v-else-if="scope.row.supplierType === '集合供应商'" type="success">{{ scope.row.supplierType }}</el-button>
                        <el-button v-else-if="scope.row.supplierType === '成品供应商'" type="danger">{{ scope.row.supplierType }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="supplierState" label="供应商状态">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.supplierState === '合格供应商'" type="success">{{ scope.row.supplierState }}</el-button>
                        <el-button v-else-if="scope.row.supplierState === '潜在供应商'" type="danger">{{ scope.row.supplierState }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="supplierAddress" label="供应商地址"></el-table-column>
            </el-table>

            <span class="bold-text">供应商财务信息</span>
            <el-table :data="tableData" style="width: 100%;">
                <el-table-column prop="invoiceHeader" label="发票抬头"></el-table-column>
                <el-table-column prop="taxNum" label="发票税号"></el-table-column>
                <el-table-column prop="taxType" label="税种"></el-table-column>
                <el-table-column prop="taxRate" label="增值税税率%"></el-table-column>
                <el-table-column prop="bank" label="开户银行"></el-table-column>
                <el-table-column prop="bankNum" label="开户账号"></el-table-column>
            </el-table>

            <span class="bold-text">供应商联系人信息</span>
            <el-table :data="contactInfo" style="width: 100%;">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="job" label="职位"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
            </el-table>

            <span class="bold-text">供应商资质信息</span>
            <el-table :data="attachments" style="width: 100%; ">
                <el-table-column prop="name" label="资质/证书名称"></el-table-column>
                <el-table-column prop="type" label="证书类别"></el-table-column>
                <el-table-column prop="attachment" label="资质/证书附件">
                    <template slot-scope="scope">
                        <img :src="$basePath+'static/uploadImages/'+scope.row.upFileName" style="max-width: 80px">
                    </template>
                </el-table-column>
            </el-table>

            <span style="color:#409EFF">供应商准入</span>
            <el-progress :percentage="15" :format="format1" :show-text="false"></el-progress>
            <el-form class="form-disabled">
                <el-row :gutter="20">
                    <el-col :span="8" >
                <el-form-item label="准入条例">
                    <el-input v-model="ruleName" disabled class="input-disabled"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                <el-form-item label="条例总分">
                    <el-input v-model="totalScore" disabled class="input-disabled"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col :span="8">
                <el-form-item label="得分">
                    <el-input v-model="getScore" disabled class="input-disabled"></el-input>
                </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                    :data="scores"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column prop="ruleDataName" label="评估项" width="180"></el-table-column>
                <el-table-column prop="score" label="得分" width="100"></el-table-column>
                <el-table-column prop="remark" label="备注" width="200"></el-table-column>
            </el-table>

            <span style="color:#409EFF">供应商准入审批</span>
            <el-progress :percentage="15" :format="format1" :show-text="false"></el-progress>
            <el-form :model="approvalForm" class="approval-form">
                <el-row>
                    <el-col >
                        <el-form-item label="是否同意成为合格供应商" required>
                            <el-radio-group v-model="approvalForm.agreement">
                                <el-radio label="同意">同意</el-radio>
                                <el-radio label="不同意">不同意</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="审批时间">
                                    <el-date-picker v-model="approvalForm.approvalTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="审批人">
                                    <el-input v-model="approvalForm.approver" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col >
                    <el-form-item label="不同意原因" v-if="approvalForm.agreement === '不同意'">
                        <el-input type="textarea" v-model="approvalForm.reason"></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitApproval">提交审批</el-button>
    </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "SupplierEnterApprovalView.vue",
        props: {
            open: {
                type: Boolean,
                required: true
            },
            supplierData: {
                type: Object,
                required: true
            },
            tableData: {
                type: Array,
                default: () => []
            },
            contactInfo: {
                type: Array,
                default: () => []
            },
            attachments: {
                type: Array,
                default: () => []
            },
        },
        data() {
            return {
                dialogVisible: this.open,
                form: {
                    supplierCode: this.supplierData.supplierCode || '',
                    supplierNum: this.supplierData.supplierNum || '',
                    supplierName: this.supplierData.supplierName || '',
                },
                localTableData: [this.form] || [],
                approvalForm: {
                    supplierId:'',
                    agreement: '',
                    approvalTime: '',
                    approver: '', // 假设审批人电话号码为审批人
                    reason: ''
                },
               scores:[],
                ruleName: '', // 规则名称
                totalScore: 0, // 总得分
                getScore:'',
            };
        },
        watch:{
            contactInfo:function (newVal,oldVal) {
                // console.log(JSON.stringify(newVal, null, 2));
            },

            open:function (newVal,oldVal) {
                // console.log(this.supplierData.id+"////////////////////");

                this.dialogVisible=newVal;
                this.handleFindRule(this.supplierData.id)
            },
            tableData:function (newVal,oldVal) {
                // console.log(JSON.stringify(newVal, null, 2));
                this.localTableData=newVal;
            },
            supplierData:function (newVal,oldVal) {
                // console.log(JSON.stringify(newVal, null, 2));
            },
        },
        methods: {
            submitApproval() {
                this.approvalForm.supplierId=this.supplierData.id
                if (this.approvalForm.agreement === '不同意' && !this.approvalForm.reason) {
                    this.$message.error('请填写不同意原因');
                    return;
                }
                this.$axios.post('manage/supplierEnterRoleScores/submitApproval', this.approvalForm)
                    .then(response => {
                        // 处理响应数据
                        if (response.data.success) {

                            this.$message.success('审批提交成功');
                            this.dialogVisible = false;

                            this.$emit('close');
                        } else {
                            this.$message.error('审批提交失败：' + response.data.message);
                        }
                    })
                    .catch(error => {
                        // 处理错误情况
                        console.log(this.approvalForm)
                        console.error('审批提交错误：', error);
                        this.$message.error('审批提交时发生错误');
                    });
                },
            format(percentage) {
                return percentage === 100 ? '满' : `${percentage}%`;
            },
            format1(percentage) {
                return percentage === 100 ? '满' : `${percentage}%`;
            },
            handleSubmit(){
                //axios调用后端添加，添加完成后触发事件submit
                this.$refs.ruleForm.validate((valid)=>{
                    if(valid){
                    }
                });

            },
            handleClose(done) {
                this.$confirm('关闭后数据将不会保存，确认关闭吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(_ => {
                        done();
                        this.$emit("close");
                        this.approvalForm={};
                    })
                    .catch(_ => {});
            },
            handleCancel(){
                this.dialogVisible=false;
                this.$emit("close");
            },
            handleFindRule(supplierId){
                this.$axios.get("manage/supplierEnterRoleScores/"+supplierId).then(
                    response=>{
                        const firstScore = response.data.scores[0];
                        this.scores=response.data.scores;
                        this.ruleName = firstScore.ruleName;
                        this.totalScore = firstScore.totalScore;
                        this.getScore = this.scores.reduce((sum, scoreItem) => sum + scoreItem.score, 0);
                    }
                )
            },
        },
        created() {
            let loginAdmin = JSON.parse(window.localStorage.getItem("form"));
            this.approvalForm.approver = loginAdmin.username;
        },
    }
</script>

<style scoped>

    .approval-form .el-form-item {
        margin-bottom: 0; /* 移除表单项的底部外边距 */
    }

    /* 审批时间和审批人的布局样式 */
    .approval-form .el-row {
        margin-bottom: 20px; /* 表单底部外边距 */
    }

    /* 审批时间和审批人的列样式 */
    .approval-form .el-col {
        padding: 0 10px; /* 列之间的内边距 */
    }

    /* 审批时间和审批人的表单项样式 */
    .approval-form .el-form-item {
        display: flex;
        align-items: center; /* 垂直居中对齐 */
    }

    /* 审批时间和审批人的输入框样式 */
    .approval-form .el-input__inner,
    .approval-form .el-date-editor {
        height: 40px; /* 输入框高度 */
        line-height: 40px; /* 行高 */
    }
    .total-score {
        margin-top: 20px; /* 在表格下方添加一些空间 */
        font-size: 16px; /* 字体大小 */
        font-weight: bold; /* 字体加粗 */
        color: #333; /* 字体颜色 */
    }

    .total-score span {
        margin-right: 10px; /* 标签和值之间的空间 */
    }
    .bold-text {
        display: block; /* 确保span占据一整行 */
        margin-top: 20px; /* 设置上边距，数值可以根据需要调整 */
        font-weight: bold; /* 如果需要，可以添加粗体样式 */
    }
    .myScore{
        color: red; /* 星号颜色为红色，表示必填 */
        margin-right: 4px; /* 在星号和输入框之间添加一些空间 */
    }
    .score-container {
        display: flex;
        align-items: center; /* 垂直居中对齐 */
    }

    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        background-color: #F2F6FC;
        border-bottom: 1px solid #ebebeb;
    }


    .tabs-container {
        display: flex;
        align-items: center;
    }

    .tab-button {
        margin-right: 8px;
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 14px;
        line-height: 1.5;
        white-space: nowrap;
    }

    .tab-button.active {
        background-color: #2d8cf0;
        color: #fff;
        border-color: #2d8cf0;
    }

    .search-container {
        margin-left: 16px;
    }

    .search-box {
        width: 250px;
        border-radius: 20px;
        background-color: #f3f3f3;
        border: 1px solid #ebebeb;
    }

    .filter-container,
    .sort-container,
    .submit-container {
        margin-left: 16px;
    }

    .filter-button,
    .sort-button,
    .submit-button {
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 14px;
        line-height: 1.5;
        white-space: nowrap;
    }

    .filter-button {
        background-color: #e6f7ff;
        color: #2d8cf0;
        border-color: #e6f7ff;
    }

    .sort-button {
        background-color: #f9f9f9;
        color: #606266;
        border-color: #ebebeb;
    }

    .submit-button {
        background-color: #f9f9f9;
        color: #606266;
        border-color: #ebebeb;
    }
    .user-info-container {
        padding: 16px;
        margin-bottom: 16px;
        border: 1px solid #ebebeb;
        background-color: #fff;
        border-radius: 4px;
    }

    .description-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .description-title span {
        font-size: 16px;
        font-weight: bold;
    }

    .title-divider {
        margin-top: 8px; /* 调整与标题的距离 */
        margin-bottom: 8px; /* 调整与内容的距离 */
        border-top: 1px solid #ebebeb; /* 自定义分割线样式 */
    }

    .el-descriptions {
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 16px;
    }

    .el-descriptions__item {
        margin-bottom: 8px;
    }

    .el-descriptions__item-label {
        font-weight: bold;
        color: #606266;
    }

    .el-descriptions__item-content {
        color: #909399;
    }

    .el-tag {
        margin-left: 8px;
    }
    .supplier-dialog {
        /* 对话框整体样式 */
        border-radius: 8px;
    }

    .dialog-content {
        /* 对话框内容区域样式 */
        padding: 20px;
    }

    .form-style .el-form-item {
        /* 表单项样式 */
        margin-bottom: 20px;
    }

    .input-style {
        /* 输入框样式 */
        width: 100%;
        border-color: #dcdfe6;
    }

    .table-style {
        /* 表格样式 */
        margin-top: 20px;
    }

    .dialog-footer {
        /* 对话框底部样式 */
        text-align: right;
        padding-top: 10px;
    }
    .form-scroll-container {
        max-height: 400px; /* 根据需要调整高度 */
        overflow-y: auto;
        padding: 10px; /* 可选，根据需要添加内边距 */
        border: 1px solid #dcdfe6; /* 可选，根据需要添加边框 */
        border-radius: 4px; /* 可选，根据需要添加圆角 */
    }

    .dialog-footer .el-button {
        /* 底部按钮样式 */
        margin-left: 10px;
    }
    .inner-dialog {
        border-radius: 8px;
        margin-top: 20px;
        max-height: 400px; /* 设置最大高度 */
        overflow-y: auto; /* 当内容超出时显示滚动条 */
    }
</style>